import {Component, ComponentProps, VueComponent, Hook, Mut, Link} from "vue3-oop";
import styles from "./index.module.scss";
import { NCard, NSpace, NTag } from 'naive-ui';
import { nicon } from "@/utils/IconUtil";

import BpmnModeler from './BpmnModeler';
import ToolbarPanel from './ToolbarPanel';
import ShapePanel from './ShapePanel';
import ConfigPanel from './ConfigPanel';

interface IProps {
  maxWidth?:number,
  maxHeight?:number
}
@Component()
export default class BpmnDesigner1 extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    maxWidth: {default: 800},
    maxHeight: {default: 600}
  }

  constructor() {
    super()
  }

  // 绘制区域REF
  @Link() private bpmnCanvas?: HTMLElement;
  @Mut() private bpmnModeler?: BpmnModeler;
  @Hook('Mounted')
  private onMounted(){
    this.bpmnModeler = new BpmnModeler(this.bpmnCanvas as HTMLElement);
  }

  render(){

    const height = this.props.maxHeight as number, width = this.props.maxWidth as number;
    const canvasHeight = height - 65, canvasWidth = width - 23;

    return(
      <NCard
        class={[styles.bpmn_designer1]}
        style={{height:`${height}px`}}
      >
        {{
          header:()=>(
            <NSpace><NTag bordered={false} size={'large'} style={{fontSize:'18px'}} color={{color:'whitesmoke'}}>
              {{ avatar: nicon("DocumentFlowchart20Filled"), default: ()=>"流程设计器" }}
            </NTag></NSpace>
          ),
          'header-extra':()=>(<>{ this.bpmnModeler && <ToolbarPanel bpmnModeler={this.bpmnModeler} /> }</>),
          default:()=>(
            <div {...{id:"bpmnWrapper"}} class={[styles.bpmn_canvas_wrapper]} style={{width:`${canvasWidth}px`,height:`${canvasHeight}px`}}>
              <div class={[styles.bpmn_canvas_view]} style={{width:`${canvasWidth}px`,height:`${canvasHeight}px`}}><div ref="bpmnCanvas" style={{width:`${canvasWidth}px`,height:`${canvasHeight}px`}}/></div>
              { this.bpmnModeler && <ShapePanel bpmnModeler={this.bpmnModeler} /> }
              { this.bpmnModeler && <ConfigPanel bpmnModeler={this.bpmnModeler} drawerTo="#bpmnWrapper"/> }
            </div>
          )
        }}
      </NCard>
    )
  }
}